<template>
  <div class="app-container">
      <div class="filter-container">
        
        <el-select v-model="search.type" clearable placeholder="全部" >
            <el-option 
            v-for="(item,index) in selectOptions.statisType" 
            :key="index"
            :label="item.label"
            :value="item.value">
                <span :class="'select-custom '+getClassName(item.value)">{{ item.label }}</span>
            </el-option>
        </el-select>
        
        <el-date-picker v-model="search.month" type="month"  placeholder="选择月" style="margin-left:10px;"></el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>

    <div class="content">
        <el-table v-loading="listLoading" :data="list" 
            border fit highlight-current-row stripe 
            style="width: 100%">
            <el-table-column align="center" label="序" width="80">
                <template slot-scope="scope">
                <span>{{ scope.row._id }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="销售顾问">
                <template slot-scope="scope">
                <span>{{ scope.row.guider }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="所在部门">
                <template slot-scope="scope">
                <span>{{ scope.row.departname }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="战败数">
                <template slot-scope="scope">
                <span v-if="scope.row.fail>0" @click="showDetailsClick(scope.row.id)">{{ scope.row.fail }}</span>
                <span v-if="scope.row.fail==0">0</span>
                </template>
            </el-table-column>
            
            <el-table-column  min-width="100" align="center" label="月份">
                <template slot-scope="scope">
                <span>{{ scope.row.month |parseTime('{y}-{m}') }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="chart" id="failChart" style="width:100%;height:400px;"></div>
    </div>

<!-- 战败明细 -->
<el-dialog :title="dialogFailList.title" :visible.sync="dialogFailList.visible"  width="900px">
    <div class="ci">
        <el-table v-loading="dialogFailList.listLoading" :data="dialogFailList.list" 
          border fit highlight-current-row stripe 
          style="width: 100%">
          <el-table-column align="center" label="序" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row._id }}</span>
            </template>
          </el-table-column>
        <el-table-column  min-width="100" align="center" label="客户">
            <template slot-scope="scope">
              <span>{{ scope.row.customername }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="回访次数">
            <template slot-scope="scope">
              <span>{{ scope.row.visited }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="意向车型">
            <template slot-scope="scope">
              <span>{{ scope.row.intentioncar }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="期望价格">
            <template slot-scope="scope">
              <span>{{ scope.row.intentionprice }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="原因">
            <template slot-scope="scope">
              <span>{{ scope.row.reason }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="自店价格">
            <template slot-scope="scope">
              <span>{{ scope.row.shopprice }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createtime |parseTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="dialogFailList.visible = false">关 闭</el-button>
        
    </div>
</el-dialog>
<!-- end 战败明细 -->

  </div>
</template>

<script>
import * as echarts from 'echarts';
import * as analyzeApi from '@/api/presale/analyze'
import {parseTime} from '@/utils/index';

export default {
    data(){
        return {
            list:null,
            listLoading:false,
            search:{
                type:'0|0',
                month:''
            },
            selectOptions:{
                statisType:[
                    {label:'全部',value:'0|0'},
                    {label:'部门1',value:'1|0'},
                    {label:'张三一',value:'2|1'},
                    {label:'张三二',value:'2|2'},
                    {label:'张三三',value:'2|3'},
                    {label:'部门2',value:'1|2'},
                    {label:'李四一',value:'2|4'},
                    {label:'李四二',value:'2|5'},
                    {label:'李四三',value:'2|6'},
                ]
            },
            dialogFailList:{
                visible:false,
                listLoading:false,
                total:0,
                list:null,
                title:'战败记录'
            }
        }
    },
    created(){
        //echarts注册
        // echarts.use(
        //     [TitleComponent, TooltipComponent, GridComponent, LineChart, CanvasRenderer]
        // );
        this.search.month=parseTime(new Date(),'{y}-{m}');
        this.fetchData();
    },
    methods:{
        fetchData(){
            var that=this;
            analyzeApi.getPerformanceOther_Fail({}).then(res=>{
                if(res.data){
                    that.list=res.data.items.map((o,index)=>{
                        o._id=index+1;
                        return o;
                    });
                }
            })
        },
        getClassName(v){
            var idx=v.split('|')[0];
            return ['lv1','lv2','lv3'][idx];
        },

        searchClick(){
            this.fetchData();
        },
        showDetailsClick(id){
            var that=this;
            that.dialogFailList.visible=true;
            //that.dialogFailList.list=[];
            that.dialogFailList.listLoading=true;
            analyzeApi.getPerformanceOther_FailDetails({}).then(res=>{
                console.log(res.data)
                if(res.data){
                    that.dialogFailList.list=[...res.data.items.map((item,index)=>{
                        item._id=index+1;
                        return item;
                    })]
                }
                that.dialogFailList.listLoading=false;
            })
        }
    }
}
</script>

<style scoped>
    .select-custom{
        display: flex; 
    }
    .select-custom.lv1{
        padding-left:0px;
    }
    .select-custom.lv2{
        padding-left:10px;
    }
    .select-custom.lv3{
        padding-left:20px;
    }
</style>